<template>
    <div class="comment-list">
        <ul class="message-container">
            <li v-for="comment in data" :key="comment.id" class="message-item">
                <a class="user-avatar">
                    <img class="avatar-item" :src="comment.user.avatar" />
                </a>
                <div class="main">
                    <div class="info">
                        <div class="user-info">
                            <a>{{ comment.user.name }}</a>
                        </div>
                        <div class="interaction-hint">
                            <span>评论了您的《{{ comment.post }}》&nbsp;</span>
                            <span>{{ comment.time }}</span>
                        </div>
                        <div class="interaction-content">
                            <span>{{ comment.content }}</span>
                        </div>
                        <div class="action">
                            <div class="action-reply" @click="toggleReply(comment)">
                                <ChatRound style="width: 1.2em; height: 1.2em" />
                                <div class="action-text">回复</div>
                            </div>
                            <div class="action-like" @click="handleLike(comment)">
                                <Star style="width: 1.2em; height: 1.2em" />
                            </div>
                            <div v-if="comment.isReplying" class="comment-wrapper">
                                <div class="input-wrapper">
                                    <textarea v-model="comment.replyText" rows="1" class="comment-input"
                                        placeholder="输入回复..." style="height: 40px"></textarea>
                                </div>
                                <button class="submit" @click="submitReply(comment)">发送</button>
                                <div class="action-cancel" @click="cancelReply(comment)">取消</div>
                            </div>
                        </div>
                    </div>
                    <div class="extra">
                        <img class="extra-image" :src="comment.user.avatar" />
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { ChatRound, Star } from "@element-plus/icons-vue";

defineProps<{
    data: Array<{
        id: number
        user: {
            name: string
            avatar: string
        }
        content: string
        post: string
        time: string
        isReplying?: boolean
        replyText?: string
    }>
}>()

const emit = defineEmits(['reply', 'like'])

const toggleReply = (comment: any) => {
    comment.isReplying = !comment.isReplying
    comment.replyText = ''
}

const submitReply = (comment: any) => {
    emit('reply', {
        commentId: comment.id,
        content: comment.replyText
    })
    comment.isReplying = false
}

const cancelReply = (comment: any) => {
    comment.isReplying = false
}

const handleLike = (comment: any) => {
    emit('like', comment.id)
}
</script>

<style lang="less" scoped>
/* 保持原有样式不变 */
.comment-list {
    .message-container {
        width: 40rem;

        .message-item {
            display: flex;
            flex-direction: row;
            padding-top: 24px;

            .user-avatar {
                margin-right: 24px;
                flex-shrink: 0;

                .avatar-item {
                    width: 48px;
                    height: 48px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    border-radius: 100%;
                    border: 1px solid rgba(0, 0, 0, 0.08);
                    object-fit: cover;
                }
            }

            /* 后续样式保持不变... */
        }
    }
}
</style>